<template>
	<view class="box">
		<view class="center">
			<view class="left_img">
				<image :src="$BASE_URL + date.image" mode="aspectFill" style="	width: 250rpx;
				height: 250rpx;"></image>
			</view>

			<view class="right_content">

				<view class="row1">
					{{date.title}}
				</view>
				<view class="row2">
					<!-- {{date.subtitle}} -->
					信用免押 丨 顺丰包邮 丨 正品保障

				</view>
				<view class="row3">
					<!-- 信用免押 丨 顺丰包邮 -->
				</view>
				<view class="row4" @click='go()'>
					查看详情
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			date: {
				type: Object,
				default: () => {
					return {}
				}
			}
			// picList:{
			// 	type:Array,
			// 	default:[]
			// }
		},
		data() {
			return {


			}

		},
		methods: {
			go() {
				console.log(this.date);
					uni.navigateTo({
						url:'/pages/goods/detail?id='+this.date.id
					})
			},



		}
	}
</script>

<style lang="scss" scoped>
	.text-style {
		font-size: 24rpx;
		color: #fff;

	}

	.box {
		margin-top: 30rpx;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		// background-color: aquamarine;
		padding: 15rpx;
		box-sizing: border-box;

		.center {
			display: flex;
			width: 100%;
			height: 100%;
			// background-color: aquamarine;


			.left_img {
				width: 250rpx;
				height: 250rpx;
				border-radius: 20rpx;
				background-color: gainsboro;
				overflow: hidden;
			}

			.right_content {
				padding-left: 20rpx;
				width: 500rpx;

				.row1 {
					font-size: 30rpx;
					color: #333333;
					font-weight: bold;
				}

				.row2 {
					font-size: 24rpx;
					color: #fa6e3e;
					margin: 20rpx 0;
				}

				.row3 {
					font-size: 22rpx;
					color: #333333;
					margin-bottom: 27rpx;
				}

				.row4 {
					width: 367rpx;
					height: 76rpx;
					line-height: 76rpx;
					background-color: #fa6e3e;
					color: #fff;
					text-align: center;
					display: flex;
					justify-content: space-between;
					padding: 0 30rpx;
					border-radius: 38rpx;
					display: flex;
					font-size: 28rpx;
					justify-content: center;

					.row4-left {
						width: 90rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;

						align-items: center;
					}

					.row4-right {
						width: 166rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
				}

				.row4:active {
					background-color: #e26238;
				}
			}
		}
	}
</style>
